<form novalidate name="$ctrl.massSend">

    <ng-transclude></ng-transclude>
    <div class="plate-warning margin-2 margin-top-2">
        <div class="body-2 warning-500 margin-05" w-i18n="modal.send.massSend.warningPlate3Header"></div>
        <div class="footnote-1 basic-500" w-i18n="modal.send.massSend.warningPlate3Text"></div>
    </div>

    <div class="flex-row-title body-2 margin-05">
        <div>
            <span w-i18n="modal.send.massSend.recipient"
                  params="{count: $ctrl.validTxCount, max: $ctrl.maxTransfersCount}"></span>
        </div>
        <w-import-file ng-if="$ctrl.transfers.length === 0"
                       extension-list="::'csv'"
                       on-change="$ctrl.importFile(data)">
            <a class="link">
                <span w-i18n="modal.send.massSend.importFile"></span>
            </a>
        </w-import-file>
        <a ng-if="$ctrl.transfers.length > 0"
           class="link"
           ng-click="$ctrl.clear()"
           w-i18n="modal.send.massSend.clear"></a>
    </div>

    <w-input-container class="margin-2">
        <w-input textarea="true"
                 class="tall"
                 name="recipientCsv"
                 w-validate
                 required
                 w-validator-custom="{{$ctrl.isValidAmounts && !$ctrl.errors.length}}"
                 ng-model="$ctrl.recipientCsv"
                 ng-model-options="{updateOn: 'input blur', debounce: { 'input': 5000, 'blur': 0 }}"
                 w-i18n-attr="placeholder"
                 placeholder="modal.send.massSend.recipientsAmountsPlaceholder"
        ></w-input>

        <div class="error active">
            <w-input-error name="recipientCsv"
                           ng-if="$ctrl.tx.transfers.length || $ctrl.transfers.length"
                           message="custom"
                           class="multiline multiline-error-input-padding">

                <span w-i18n="modal.send.errors.max"
                    ng-if="!$ctrl.isValidAmounts && $ctrl.tx.transfers.length"></span>

                <span ng-if="$ctrl.transfers.length && !$ctrl.tx.transfers.length"
                      w-i18n="modal.send.errors.allAddressesInvalid"></span>

                <span ng-if="$ctrl.errors.length" w-i18n="modal.send.massSend.errors.invalidAddress"
                      class="error-list-row"></span>

                <span ng-repeat="error in $ctrl.errors|limitTo: ($ctrl.view.errors.showAll && $ctrl.errors.length || 2) track by error.recipient"
                      class="error-list-row">{{::error.recipient}}</span>

                <span ng-if="$ctrl.errors.length > 2"
                      class="error-list-row show-all-errors-link link"
                      w-i18n="modal.send.massSend.showAllErrors.{{$ctrl.view.errors.showAll}}"
                      params="{count: $ctrl.errors.length}"
                      ng-click="$ctrl.view.errors.showAll = !$ctrl.view.errors.showAll">
                        </span>
            </w-input-error>
        </div>

        <w-input-error name="recipientCsv" message="required">
            <span w-i18n="modal.receive.errors.required"></span>
        </w-input-error>
    </w-input-container>

    <div class="plate-warning margin-2">
        <div class="body-2 warning-500 margin-05" w-i18n="modal.send.massSend.warningPlate2Header"></div>
    </div>

    <div class="plate-warning margin-2" ng-if="$ctrl.transfers.length > $ctrl.maxTransfersCount">
        <div class="body-2 warning-500 margin-05" w-i18n="modal.send.massSend.warningPlate1Header"></div>
        <div class="footnote-1 basic-500" w-i18n="modal.send.massSend.warningPlate1Text"></div>
    </div>

    <div class="body-2 margin-05" w-i18n="modal.send.massSend.description"></div>
    <w-input-container class="margin-2">
        <w-input textarea="true"
                 class="normal"
                 name="attachment"
                 ng-model="$ctrl.tx.attachment"
                 w-i18n-attr="placeholder"
                 w-validate
                 w-validator-byte-lte="140"
                 placeholder="modal.send.descriptionPlaceholder"></w-input>

        <w-input-error message="byteLte">
            <span w-i18n="modal.send.attachmentLength"></span>
        </w-input-error>
    </w-input-container>

    <div class="body-2 margin-05" w-i18n="modal.send.massSend.totalAmount"></div>
    <div class="input-like total-amount margin-1">
        <w-balance money="$ctrl.totalAmount"></w-balance>
    </div>

    <div params="{fee: $ctrl.tx.fee}"
         w-i18n="modal.send.fee"
         class="fee row margin-1 basic-500">
    </div>

    <div ng-if="!$ctrl.hasFee"
         params="{fee: $ctrl.tx.fee}"
         w-i18n="modal.send.validationError.notEnoughFunds"
         class="commission-error margin-2 footnote error-500">
    </div>

    <div class="margin-top-3">
        <w-sign-button disabled="!$ctrl.isValidAmounts || !$ctrl.tx.transfers.length || !$ctrl.hasFee"
                       on-success="$ctrl.onTxSign(signable)"
                       on-click="$ctrl.nextStep()">
            <span w-i18n="button.continue"></span>
        </w-sign-button>
    </div>
</form>
